brainpopfandomcom-20200223-history
Variables/Transcript
Transcript Text reads: The Mysteries of Life with Nat and Moby A girl, Nat, and a robot, Moby, are standing in front of a picnic table stacked with plastic containers full of food at Camp Chippenwonka. Nat is wearing a baseball cap with the words "Junior Counselor" printed on it, and Moby is wearing a hair net. NAT: I specifically requested bear patrol! Prepping picnic lunches for 150 Chippewonkans is so not my thing. MOBY: Beep! Moby gestures to a sign posted on the building behind them that reads: "Good Nutrition Saves Lives!" NAT: You're right; we're pretty much heroes. Anyway, let's get this over with, I wanna be waterskiing by noon! She picks up a label and reads the name off it. NAT: Del Almeida. Moby reads from a clipboard. MOBY: Beep… Nat repeats back what Moby said and writes it on the label under the name. NAT: PB&J… MOBY: Beep… NAT: With an apple, carrots, and string cheese. She puts the label down next to the stack and grabs the next label. NAT: Hope Arnold. MOBY: Beep… NAT: Chicken salad… MOBY: Beep… NAT: With an apple, carrots, and string cheese. She puts the label down next to the stack and grabs the next label. NAT: Daniel Baker. MOBY: Beep… NAT: Falafel… MOBY: Beep be-- NAT: Carrots, and string cheese, yes I got it. Nat reads from a typed letter. NAT: Dear Nat and Moby, I'm just learning to code in JavaScript, and I don't get variables. What's the point? Thanks, Enid. NAT: You couldn't have asked at a better time, Enid! Using variables right now would save us a bunch of time, and me from getting a hand cramp. MOBY: Beep? NAT: Variables let us store info that we'll need to reuse a lot in our code. Think of them like these labels. An image shows a blank label. The word "Snack" appears on the label. NAT: If we were coding them, we might name a variable "snack." Now we can store whatever value, or piece of info, we want in it. An animation shows an apple, baby carrots, and string cheese appearing behind the label. The words "apple, carrots, string cheese" appear in quotation marks on the label under "Snack." NAT: Like say, an apple, carrots, and string cheese! We can even modify the value if we need to. Adding to it… taking stuff away… or changing it altogether. An animation shows pretzels appearing on screen, as the word "pretzels" is added to the label. The carrots then disappear, and the label changes accordingly. The apples, string cheese, and pretzels are replaced by potato chips and grapes, and the label changes accordingly. NAT: It's like a shortcut that makes your code way simpler. Matter of fact, why am I doing the label-writing? We could program you to label these lunches while you're packing them! And then we can spend our time where it's better served: ripping some serious ollies on Lake Chippewonka. Nat whips out her smart phone and taps a few keys. Moby's chest plate begins to slide down slowly. Moby frowns and taps on his own wrist pad. MOBY: Beep! Moby's chest plate begins to slowly close. Nat keeps tapping her phone as Moby taps his wrist pad. NAT: Don't be a baby… this won't… hurt… a bit! Moby's chest plate goes up and down a few times, then stays down. NAT: Now where was I? Oh right: we can use variables to help you to write these labels. Our first step is to declare, or create, our variable. Behind Moby's open chest plate, there's a blank screen with a bracket and a blinking cursor. Nat begins tapping on her phone, as "var snack" is typed out on Moby's display. NAT: I type "var," as in variable, followed by the name I want to use, "snack." We could call the variable anything really: appetizers, morsels, or any random word. You follow the name with a semicolon. That's how JavaScript knows it's the end of a statement. MOBY: Beep! On Moby's display, "snack" deletes itself, and is replaced by "variable." NAT: Probably not a good idea to call your variable, "variable." It’s best to come up with a name that describes what it's for. She taps on her phone and undoes Moby's variable renaming. NAT: It'll make more sense for anyone who might need to edit your code later on. Anyway, next thing to do is assign the variable a specific value. We simply type snack = "apples, carrots, and string cheese"; on the next line. The quotation marks tell JavaScript that the value is a string. That's coder lingo for any bit of text that we want to display somewhere. The first time we assign a value to a variable is called initializing. And actually, we can declare and initialize our variable all at once. Nat taps on her phone, and the two lines are replaced with var snack = "apples, carrots, and string cheese"; on Moby's chest display. NAT: Now our variable is ready to use in our lunch-labeling program. So, Del Almeida… PB&J… Hope Arnold… Daniel Baker… A split screen shows Nat on the left, typing into her phone. On the right, a close-up of Moby's chest display shows the code as she enters it: var Person1 = { name: "Del Almeida", meal: "PB&J", snack: "snack; var Person2 = { name: "Hope Arnold", meal: "PB&J", snack: "snack; A clock-wipe indicates that she has entered all of the code. NAT: And voila, you are hereby coded to label everybody's lunch! Moby holds up a bin labeled "apples," which is empty. MOBY: Beep! NAT: You waited till now to tell me we ran out of apples? Moby shrugs. Nat sighs. NAT: All right, no worries, it’s called a variable cuz we can vary, or change, its value. I happen to know our kitchen is swimming in pretzels. So all we need to do is swap them in for apples in the initialization line. An image shows the word "apples" being replaced with "pretzels" on Moby's display screen. Nat gets ready to push the RUN button on her phone's display. NAT: And now, you should be ready to start packing and labeling these-- Moby folds his arms and looks at Nat. MOBY: Beep! NAT: The vegan campers. Right. There's a few things we can do to fix this problem. We’ve got some bananas left over from yesterday's lunch. An animation shows a plastic container full of spotty bananas with flies buzzing all around them. The screen splits to show Moby's chest display on the right. In the variable line of code, "string cheese" disappears and is replaced by "banana." NAT: We could swap them for string cheese… But that'd mean everyone gets a banana, and nobody gets string cheese. Which would be a national tragedy. An animation shows the word "banana" in the code on Moby's display changing back to "string cheese." NAT: So instead, let's create another variable to make a different snack. MOBY: Beep! Moby smiles and taps on his wrist keypad, adding the following line of code to the end of the program: var veganSnack = "pretzels, carrots, and banana";. NAT: Right, just initialize a new variable, say, veganSnack. Then adjust the entries for all the vegan campers. On Moby's display, "snack" is replaced by "veganSnack" for various campers. NAT: And that should do the trick! Nat hits the RUN button on her phone. Moby's pupils dilate and he labels and packs all of the lunches in a blur of activity. After a couple of seconds, an error noise sounds, and he stops packing. His chest display is stopped at the following code: var Person5 = { name: "Annie Choi", meal: "PB&J", snack: veganSnack } The last line of code is highlighted in red and below it the message "ERROR: variable unknown" is flashing. NAT: Uh… or should it? Looks like we've got a bug! The program stopped running at this line. And it says the variable is unknown. Got any guesses? Moby shrugs. The cursor on his display starts running through the code starting from the top. NAT: In coding, the order of the statements is kinda important. A computer will run through the program in the order you see it. And since we put the new variable at the end of the program… MOBY: Beep! NAT: Right, it doesn't know what veganSnack means, cuz it hasn't gotten there yet. Which is kinda weird, since "it" is you, and we just did this together. Moby's face looks blank. NAT: But anyway, we need to declare the variable before any code that references it. On her phone, Nat cuts the misplaced line, and pastes it to the top of the code editor, right under the declaration of the first snack. NAT: Now that that's all fixed, let's… GO! Nat pushes the RUN button on her phone, and Moby's pupils dilate and he once again goes into a flurry of lunch-packing activity. NAT: Once you get the hang of variables, they're incredibly useful. They come in handy for any part of a program that might need different values. Like, say you're coding a game. You could declare a variable called "playerName." A split screen shows a computer display on the left side with the following code on it: var playerName = "Nat";. showText "Hi," + playerName + "!" "Ready" + "to" + "play?"; On the right side is an 8-bit video game, with an orange Moby character below a speech bubble that reads: "Hi, Nat! Ready to play?" NAT: Then switch its value based on who's playing, so the change is seen across the whole game. On the computer display on the left side of the split screen, "Nat" changes to "Tim" and the text in the speech bubble on the right side changes to "Hi, Tim! Ready to play?" NAT: Scoring is another common usage. Variables don't save any previous value. So as players rack up points, the value of the "score" variable changes. On the left side of the split screen, the second line of code on the computer display reads: var score = "0";. The third line reads: showText playerName + "has" + "score" + "points!";. On the right side of the screen, the 8-bit game Moby character moves along collecting gold coins. Above it, a bubble in the upper right of the screen reads: "Nat has 0 points!" As the character grabs the coins, the number of points increases by increments of 10, both on the left side of the screen in the code var score =, and on the right side of the screen in the bubble. MOBY: Beep! Moby looks exhausted. On the table in front of him are stacks and stacks of beautifully packed bag lunches. NAT: Man, you're a lunch-packing machine! Like, literally… you are a machine that packs lunches. Anyway, c'mon, let's go carve some progressives on the long-line! Moby blinks blankly. MOBY: Beep? NAT: That means, let's go water ski. Moby instantly perks up, throws off his hair net, and runs off.Category:BrainPOP Transcripts